<template>
  <div class="email-icon" @click="showEmail">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="#fff" d="M22,3.27a2,2,0,0,0-2-.82H4a2,2,0,0,0-2,.82L11.47,12,2,20.55a2,2,0,0,0,0,2.9,2,2,0,0,0,2.83,0L12,13.17l7.17,7.28a2,2,0,0,0,2.83,0,2,2,0,0,0,0-2.9Z" />
    </svg>
  </div>
  <div class="content">
    <nav class="navbar">
      <a class="navbar-brand" href="#">My Site</a >
      <ul class="navbar-nav">
        <li class="nav-item">
          <a :class="{ 'nav-link': true, 'active': currentTab === 'home' }" href="#" @click.prevent="switchTab('home')">Home</a >
        </li>
        <li class="nav-item">
          <a :class="{ 'nav-link': true, 'active': currentTab === 'about' }" href="#" @click.prevent="switchTab('about')">About Us</a >
        </li>
        <li class="nav-item">
          <a :class="{ 'nav-link': true, 'active': currentTab === 'services' }" href="#" @click.prevent="switchTab('services')">Services</a >
        </li>
        <li class="nav-item">
          <a :class="{ 'nav-link': true, 'active': currentTab === 'contact' }" href="#" @click.prevent="switchTab('contact')">Contact Us</a >
        </li>
      </ul>
    </nav>
    <main class="main">
      <template v-if="currentTab === 'home'">
        <h1>Welcome to My Site</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor tellus nec nisi lacinia, vel pellentesque odio pretium.</p >
      </template>
      <template v-else-if="currentTab === 'about'">
        <h1>About Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor tellus nec nisi lacinia, vel pellentesque odio pretium.</p >
      </template>
      <template v-else-if="currentTab === 'services'">
        <h1>Our Services</h1>
        <ul>
          <li>Service 1</li>
          <li>Service 2</li>
          <li>Service 3</li>
        </ul>
      </template>
      <template v-else-if="currentTab === 'contact'">
        <h1>Contact Us</h1>
        <p>Feel free to contact us with any questions or concerns.</p >
        <form>
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" required>
          </div>
          <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" required>
          </div>
          <div class="form-group">
            <label>Message</label>
            <textarea class="form-control" rows="5" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </template>
    </main>
    <footer class="footer">
      &copy; My Site 2021
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home'
    }
  },
  methods: {
    showEmail() {
      // 实现弹出邮件框的代码
    },
    switchTab(tabName) {
      this.currentTab = tabName
    }
  }
}
</script>

<style>
/* CSS 样式 */
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  color: #333;
}

a {
  color: #007bff;
  text-decoration: none;
}

/* 邮箱标识样式 */
.email-icon {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #007bff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.email-icon:hover {
  transform: rotate(180deg);
}

.email-icon svg {
  width: 40px;
  height: 40px;
}

/* 导航栏样式 */
.navbar {
  background-color: #fff;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 0 20px;
}

.navbar-brand {
  font-size: 24px;
  font-weight: bold;
}

.nav-item {
  margin-right: 10px;
}

.nav-link {
  font-size: 18px;
  font-weight: bold;
  transition: color 0.2s ease-in-out;
}

.nav-link:hover {
  color: #007bff;
}

.nav-link.active {
  color: #007bff;
}

/* 主要内容样式 */
.main {
  padding: 40px 20px;
  text-align: center;
}

.main h1 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.main p {
  font-size: 18px;
  line-height: 1.5;
}

/* 页脚样式 */
.footer {
  height: 40px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #ddd;
  font-size: 14px;
  color: #999;
}
</style>